<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>D5实时渲染</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/d5-script.css">
</head>
<body>

<!-- 主体结构 -->
<main class="page-layout">

    <!-- 功能面板 -->
    <aside class="tool-panel">

        <!-- 渲染设置 -->
        <section class="render-settings">
            <h2>渲染参数设置</h2>
            <div class="setting-group">
                <label>分辨率：
                    <input type="number" value="1920" min="800" max="3840"> ×
                    <input type="number" value="1080" min="600" max="2160">
                </label><br/>
                <label>抗锯齿：
                    <select>
                        <option>关闭</option>
                        <option>2×</option>
                        <option>4×</option>
                    </select>
                </label>
            </div>
        </section>

        <!-- 渲染队列 -->
        <section class="render-queue">
            <h2>当前渲染任务</h2>
            <table class="queue-table">
                <tr><th>任务名称</th><th>进度</th><th>状态</th></tr>
                <tr><td>客厅场景</td><td>75%</td><td>渲染中</td></tr>
                <tr><td>办公室场景</td><td>30%</td><td>等待中</td></tr>
            </table>
        </section>

        <!-- 渲染历史 -->
        <section class="render-history">
            <h2>已完成任务</h2>
            <table class="history-table">
                <tr><th>任务名称</th><th>完成时间</th><th>操作</th></tr>
                <tr><td>卧室场景</td><td>2024-07-15 10:20</td><td><a href="#">下载</a></td></tr>
                <tr><td>厨房场景</td><td>2024-07-15 09:15</td><td><a href="#">下载</a></td></tr>
            </table>
        </section>

        <!-- 教程 -->
        <section class="render-tutorial">
            <h2>操作指南</h2>
            <ul class="tutorial-list">
                <li><a href="#">基础参数设置教程</a></li>
                <li><a href="#">材质灯光调试技巧</a></li>
            </ul>
        </section>

    </aside>

    <!-- 工作区 -->
    <section class="workspace">
        <canvas id="renderCanvas"></canvas>
    </section>

</main>

<script src="../js/d5-script.js"></script>
</body>
</html>